<template>
	<view class="container">
		<!-- 测线数据 - 垂直列表 -->
		<view class="section">
			<view class="section-header">
				<uni-icons type="list" size="18" color="#007AFF"></uni-icons>
				<text class="section-title">测线数据</text>
			</view>
			<view class="line-list">
				<view class="line-item" v-for="(item, index) in measuringArr" :key="index">
					<view class="line-content">
						<view class="line-header">
							<uni-icons type="location-filled" size="16" color="#007AFF"></uni-icons>
							<text class="line-title">{{item.id}}号测线</text>
						</view>
						<view class="data-item">
							<text class="data-label">均匀度：</text>
							<text class="data-value">{{item.junyundu}}</text>
						</view>
						<view class="data-item">
							<text class="data-label">流速：</text>
							<text class="data-value">{{item.aveTy}} m/s</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 测量参数 -->
		<view class="section">
			<view class="section-header">
				<uni-icons type="gear-filled" size="18" color="#007AFF"></uni-icons>
				<text class="section-title">测量参数</text>
			</view>

			<view class="param-item">
				<view class="param-label">
					<uni-icons type="map-pin-ellipse" size="16" color="#34C759"></uni-icons>
					<text>水深</text>
				</view>
				<view class="param-input">
					<input v-model="wD" @input="changeInputFn" type="number" placeholder="输入水深" class="input-field" />
				</view>
			</view>

			<view class="param-item">
				<view class="param-label">
					<uni-icons type="star-filled" size="16" color="#FF9500"></uni-icons>
					<text>系数</text>
				</view>
				<view class="param-input">
					<input v-model="xishu" @input="changeInputFn" type="number" placeholder="输入系数"
						class="input-field" />
				</view>
			</view>

			<view class="param-item result">
				<view class="param-label">
					<uni-icons type="sound" size="16" color="#FF2D55"></uni-icons>
					<text>流量</text>
				</view>
				<view class="param-value">
					<text class="highlight">{{liusliangnub}}</text>
				</view>
			</view>

			<view class="param-item">
				<view class="param-label">
					<uni-icons type="calendar" size="16" color="#5856D6"></uni-icons>
					<text>时间</text>
				</view>
				<view class="param-value">
					<text>{{timeCL}}</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="actions">
			<button class="btn primary" @click="hiddenTrafficFn">
				<uni-icons type="undo" size="16" color="#007AFF"></uni-icons>
				<text>返回</text>
			</button>
			<button class="btn secondary" @click="saveToLocal">
				<uni-icons type="compose" size="16" color="#ffffff"></uni-icons>
				<text>保存流量</text>
			</button>
		</view>
		<u-modal :show="showupload" :showCancelButton="true" title="是否保存数据" @cancel="canceluploadFn"
			@confirm="confirmuploadFn"></u-modal>
	</view>
</template>
<script>
	import dayjs from '@/common/dayjs.min.js'
	export default {
		props: {
			objFlowData: {
				type: [Object],
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				surveyStationName: '', //测站名称 
				timeCL: '', // 测量时间
				notekeeper: '', // 记录人
				fontSize: '20px',
				urlAlphabet: 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict',
				liusliangnub: 0, //平均总流量
				xishu: 0, //流量系数
				wD: 0, //水深
				pointVelocity: [], //测线点流速
				measuringArr: [], //测线数组
				dianfa: 0, //测量几点法
				devList: {}, //设备列表
				showupload: false, //上传弹窗
				columns: [], //选择器
				cezhanObj: {}, //测站信息
				celiangfangshi: null, //测量方式
				measurementType: '', //测量设备方式
			}
		},

		onUnload() {
			console.log('卸载');
		},
		methods: {
			// 接收并处理父组件传递的流量数据
			processFlowData(data) {
				this.cezhanObj = this.vuex_cezhanInfo
				this.cezhanObj.cexianlist = this.vuex_cezhanInfo.measurementModeList[1].value || [];
				this.measuringArr = data.flowRateList
				this.wD = data.wD
				this.xishu = data.coeffient
				this.timeCL = dayjs(new Date()).format('YYYY-MM-DD HH:mm')
				this.calculateFlow();
			},
			// 保存到本地
			saveToLocal() {
				this.showupload = true
			},
			// 上传选择设备取消
			canceluploadFn() {
				this.showupload = false
			},
			// 上传选择设备确定
			confirmuploadFn() {
				this.saveTrafficFn()
			},
			// 保存流量
			saveTrafficFn() {
				let day = dayjs(new Date()).format('YYYY-MM-DD HH:mm')
				let arr = this.vuex_flowHistory
				let obj = {
					id: this.nanoid(),
					measuringArr: this.measuringArr,
					wD: this.wD,
					xishu: this.xishu,
					liusliangnub: this.liusliangnub,
					timeCL: this.timeCL
				}
				arr.unshift(obj)
				uni.$u.vuex('vuex_flowHistory', arr)
				// 返回
				setTimeout(() => {
					this.childMethod()
				}, 100)


			},
			// 返回
			hiddenTrafficFn() {
				this.childMethod()
			},
			// 调用父组件隐藏
			childMethod() {
				this.$emit('fatherMethod');
			},
			// 输入框计算
			changeInputFn() {
				this.calculateFlow()
			},
			// 计算流量
			calculateFlow() {
				if (this.wD <= 0) {
					uni.showToast({
						icon: 'error',
						title: '未获取水深',
						duration: 1500
					});
					return
				}
				let vls = this.measuringArr
				let vlAll = []
				let vl0 = null //区域流量
				let vl1 = null //区域流量
				let vlz = null //区域流量
				let vln = null //区域流量
				let vln1 = null //区域流量
				let vln2 = null //区域流量

				let sin27LL = Math.sin(this.cezhanObj.lSA * Math.PI / 180)
				let cos27LL = Math.cos(this.cezhanObj.lSA * Math.PI / 180)
				let areaLL = cos27LL / sin27LL //三角面积L

				let sin27RR = Math.sin(this.cezhanObj.rSA * Math.PI / 180)
				let cos27RR = Math.cos(this.cezhanObj.rSA * Math.PI / 180)
				let areaRR = cos27RR / sin27RR //三角面积R

				vl0 = 0.5 * this.wD * this.wD * areaLL * (vls[0].aveTy * 1) * (this.cezhanObj.kL * 1)
				vlAll.push(vl0.toFixed(6) * 1)

				vl1 = 0.5 * [(vls[0].aveTy * 1) + (vls[0].aveTy * 1)] * (this.wD) * (this.cezhanObj.cexianlist[0].cR * 1)
				vlAll.push(vl1.toFixed(6) * 1)

				if (vls.length > 1) {
					for (let i = 0; i < vls.length - 1; i++) {
						vlz = 0.5 * [(vls[i].aveTy * 1) + (vls[i + 1].aveTy * 1)] * (this.wD) * [(this.cezhanObj
							.cexianlist[i + 1].cR * 1) - (this.cezhanObj.cexianlist[i].cR *
							1)]
						vlAll.push(vlz.toFixed(6) * 1)
					}
				}

				vln1 = 0.5 * [(vls[vls.length - 1].aveTy * 1) + (vls[vls.length - 1]
					.aveTy * 1)] * (this.wD) * [(this
					.cezhanObj.qudikuandu * 1) - (this.cezhanObj.cexianlist[vls.length - 1].cR * 1)]
				vlAll.push(vln1.toFixed(6) * 1)

				vln2 = 0.5 * this.wD * this.wD * areaRR * (vls[vls.length - 1].aveTy * 1) * (this.cezhanObj.kR * 1)
				vlAll.push(vln2.toFixed(6) * 1)

				let sum = 0;
				for (let i = 0; i < vlAll.length; i++) {
					sum += vlAll[i];
				}
				this.liusliangnub = (sum * this.xishu).toFixed(3) * 1
			},
			// 生Id
			nanoid(size = 21) {
				let id = ''
				let i = size
				while (i--) {
					id += this.urlAlphabet[(Math.random() * 64) | 0]
				}
				return id
			},
		}
	}
</script>
<style scoped>
	.container {
		padding: 80rpx 20rpx 20rpx 20rpx;
		/* background-color: #aaff00; */
	}

	.section {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #F2F2F7;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-left: 12rpx;
	}

	/* 测线列表样式 - 垂直排列 */
	.line-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.line-item {

		margin-top: 10rpx;
		background-color: #F8F8F8;
		border-radius: 10rpx;
		padding: 20rpx;
		border: 1rpx solid #E5E5EA;
	}

	.line-header {
		display: flex;
		align-items: center;
	}

	.line-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #007AFF;
		margin-left: 8rpx;
	}

	.line-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.data-item {
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}

	.data-label {
		color: #666666;
		margin-right: 8rpx;
	}

	.data-value {
		color: #55aa7f;
		font-weight: 500;
	}

	/* 参数输入区样式 */
	.param-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #F2F2F7;
	}

	.param-label {
		display: flex;
		align-items: center;
		color: #333333;
	}

	.param-label text {
		margin-left: 10rpx;
	}

	.param-value {
		font-size: 40rpx;
		display: flex;
		align-items: center;

	}

	.input-field {
		text-align: right;
		font-size: 40rpx;
		color: #f4a300;
		width: 180rpx;
		padding: 0 10rpx;
	}

	.unit {
		color: #999999;
		font-size: 26rpx;
		margin-left: 8rpx;
	}

	.result .highlight {
		font-weight: 600;
		color: #2c64ff;
	}

	/* 操作按钮样式 */
	.actions {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 50rpx;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		padding: 0 40rpx;
	}

	.btn.primary {
		background-color: #FFFFFF;
		color: #007AFF;
		border: 1rpx solid #007AFF;
		flex: 1;
		margin-right: 20rpx;
	}

	.btn.secondary {
		background-color: #007AFF;
		color: #FFFFFF;
		flex: 1;
	}

	.btn text {
		margin-left: 8rpx;
	}
</style>